<template>
    <div class="body">
        <div style="height:150px;">
            <BreadcrumbA></BreadcrumbA>
        </div>
        <div id="info" class="info">
            <div class="condition"> {{parent.alias}} {{typeA}} 菜单</div>
            <div class="{'widhtO':true}"   v-for="(item,index) in zhubuGns" :key="index">
                <div :class="{ 'widhtA':widhtA, 'widhtB':widhtB, 'widhtC':widhtC }" v-for="(item2,index2)  in item" :key="index2">
                    <div v-if="item2.title!=''">
                        <div style="float:left" >
                            <img class="img" :src="$store.state.images.dangqi">
                        </div>
                        <!-- <div class="_div"  @click="ClickTo(item2.component,item2.title)">{{item2.title}}</div> -->
                        <div class="_div"  @click="ClickTo('mainwork',item2.title)">{{item2.title}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        name: '',
        data() {
            return {
                zhubuGns:[],
                widhtA:false,
                widhtB:false,
                widhtC:false,

                typeA:'',//该支部的相关配置信息



                parent: {},
                menus:[],
                
                
            }
        },
        mounted() {
            let _this=this;
            if (this.GetUser() == false) {
                this.$router.push("/");
            }
            if(this.$route.params){
                if(this.$route.params.typeA){
                    this.typeA=this.$route.params.typeA;
                }
            }
            this.GetZbByIdFunc();
            this.GetGns(this.typeA)
            .then(function(value){
                _this.menus=value.Ltabs;
            })

        },
        components:{
        },
        watch:{
            "menus":{
                handler(){
                    this.GetzhubuGns();
                },
                deep:true
            }
        },
        methods: {
            ...mapActions(['GetUser','GetGns','GetZbById','WriteActivebreadcrumb']),
            ClickTo(value,param) {
                this.$router.push({
                    name:value,
                    params:{
                        name:param,
                        typeA:this.typeA,
                        menuIndexRightitem:this.menus
                    }
                })
            },
            GetZbByIdFunc()
            {
                let _this = this;
                this.GetZbById({
                    dwid: this.$store.state.Dw_DzbID.dwid,
                    dzbid: this.$store.state.Dw_DzbID.dzbid,
                })
                .then(function (e) {
                    if (typeof e === "object") {
                        _this.parent = e.PostThis;
                        _this.WriteActivebreadcrumb({
                            name:'Menu',
                            value:_this.typeA,
                        })
                    }
                });
            },
            GetzhubuGns(){
                let num=1;
                if(this.menus.length<=2){
                    num=2;
                }
                else if(this.menus.length==3){
                    num=3;
                }
                else if(this.menus.length==4){
                    num=2;
                }
                else if(this.menus.length==5){
                    num=3;
                }
                else if(this.menus.length==6){
                    num=3;
                }
                else 
                {
                    num=4;
                }

                if(num==2)
                {
                    this.widhtA=false;this.widhtB=false;this.widhtC=true;
                }
                else if(num==3)
                {
                    this.widhtA=false;this.widhtB=true;this.widhtC=false;
                }
                else if(num==4)
                {
                    this.widhtA=true;this.widhtB=false;this.widhtC=false;
                }
                else
                {

                }
                for(var i=0;i<this.menus.length;i+=num){
                    let OneRow=this.menus.slice(i,i+num);
                    if(OneRow.length !=num){
                        for (let j = OneRow.length; j < num; j++) {
                            OneRow.push({
                                title: '',
                            })
                        }
                    }
                    this.zhubuGns.push(OneRow);
                }
            }
        },
    }
</script>
<style scoped>
    .widhtO
    {
        width:100%;  height:122px;   border: 2px solid #c54343;
    }
    .widhtA{
        width:25%; height:120px; float:left; border: 2px solid #c54343;  background-color: white;
    }
    .widhtB{
        width:33.3%; height:120px; float:left; border: 2px solid #c54343;  background-color: white;
    }
    .widhtC{
        width:50%; height:120px; float:left; border: 2px solid #c54343;  background-color: white;
    }
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .img {

        margin-top: 10px;
        width: 90px;
        float: left;
        margin-left: 30%;
    }

    .img1 {

        margin-top: 20px;
        width: 140px;
        margin-left: 30%;
    }

    ._div {
        width: 60%;
        text-align: center;
        float: left;
        line-height: 120px;
        font-size: 28px;
        font-family: cursive;
        font-weight: bold;
        cursor: pointer;

    }

    .body {
        width: 100%;
        height: 950px;
        background: url(../../images/bj3.jpg) no-repeat center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

    }
    .info {

        background-color: white;
        width: 70%;
        margin-left: 15%;
        height: auto;
        border: 2px solid #c54343;
        border-radius: 5px;
    }
    .condition {

        width: 100%;
        height: 30px;
        font-size: 16px;
        font-weight: bold;
        background-color: #c54343;
        line-height: 30px;
        color: #ffffff;
    }

    .span_Introduction {

        margin-top: 10px;
    }

    .main {

        width: 48%;
        height: 450px;
        float: left;
        margin-top: 10px;
        border: 2px solid #c54343;
    }
</style>
